<template>
  <div class="cinema-detail-container">
    <Header
      :list="currentFilmList"
      v-if="currentFilmList.length > 0"
      :currentCinemaInfo="currentCinemaInfo"
    ></Header>
    <Films
      v-if="currentFilmList.length > 0"
      :list="currentFilmList"
      v-model="currentFilmId"
      @onchangeFilm="onChangeFilmId"
    >
    </Films>
    <div>
      <Filter
        v-if="timeList.length"
        :data="timeList"
        @onChanged="onTimeChanged"
      ></Filter>
    </div>
    <div class="list-container" v-if="arrangementList.length && !loading">
      <Item
        v-for="(item, index) in arrangementList"
        :info="item"
        :list="currentFilmList"
        :currentFilmId="currentFilmId"
        :key="index"
      ></Item>
    </div>
    <template v-if="arrangementList.length === 0 && loading">
      <div style="padding: 0 15px">
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
      </div>
    </template>
    <template v-if="arrangementList.length === 0 && !loading">
      <nut-empty description="暂无场次"></nut-empty>
    </template>
  </div>
</template>
<script lang="ts" setup>
import Header from "./header.vue";
import Films from "./films.vue";
import Item from "./item.vue";
import { storeToRefs } from "pinia";
import Filter from "./filter.vue";
import * as cinemaApi from "../../api/cinema";
import { useLocationStore } from "../../store";
const locationStore = useLocationStore();
const { getSelectCityinfo } = storeToRefs(locationStore);

import {
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import Taro from "@tarojs/taro";
const router = Taro.useRouter();
const currentFilmId: any = ref(null);
const currentCinemaId: any = ref(null);
const currentCinemaInfo: any = ref(null);
const currentFilmList: any = ref([]);
const loading = ref(true);
const arrangementList: any = ref([]);
var timeList = reactive([]);
const filterInfo = reactive({
  date: "",
});
//数据接口
const totalInfo = ref({
  cinemaCode: "",
  filmId: 0,
  showDate: "",
});
//切换电影
const onChangeFilmId = (id) => {
  currentFilmId.value = id;
  totalInfo.value.filmId = id;
};
// 模板渲染
onMounted(() => {
  currentCinemaId.value = router.params.cinemaId;
  currentFilmId.value = router.params.filmId;
  totalInfo.value.filmId = router.params.filmId;
  totalInfo.value.cinemaCode = router.params.cinemaCode;
  getFimlListById();
});
// 监视 currentFilmId 的变化，当它变化时触发 getTimesData
watch(currentFilmId, () => {
  timeList = [];
  arrangementList.value = [];
  getTotalData();
});
//时间改变
const onTimeChanged = (data) => {
  if (!data) {
    return;
  }
  const { time } = data;
  filterInfo.date = time;
  totalInfo.value.showDate = time;
  arrangementList.value = [];
  getTotalData();
};
//最新添加
const getFimlListById = async () => {
  const res: any = await cinemaApi.getFilmListByCinemaId({
    cinemaId: currentCinemaId.value,
  });
  if (res.state == 200) {
    currentFilmList.value = res.data.filmList;
    currentCinemaInfo.value = res.data.cinemaInfo;
    initCurrentFilmId();
  }
};
//获取全部数据
const getTotalData = async () => {
  loading.value = true;
  for (const key in totalInfo.value) {
    if (
      totalInfo.value[key] === 0 ||
      totalInfo.value[key] === "" ||
      totalInfo.value[key] === null
    ) {
      delete totalInfo.value[key];
    }
  }
  const res: any = await cinemaApi.getCinemaAggrementByCDF(totalInfo.value);
  if (res.state == 200) {
    setTimeout(() => {
      loading.value = false;
    }, 100);
    timeList = res.data.dateList ? res.data.dateList : [];
    arrangementList.value = res.data.timeList ? res.data.timeList : [];
  }
};
//初始化当前的电影Id
const initCurrentFilmId = async () => {
  if (currentFilmId.value) {
    return false;
  }
  if (currentFilmList.value.length > 0) {
    currentFilmId.value = currentFilmList.value[0].id;
  }
};
</script>
<style lang="scss">
.cinema-detail-container {
  display: flex;
  flex-direction: column;
  .list-container {
    padding: 0 25px;
    .cinema-detail-item-container {
      .nut-cell {
        margin-bottom: 0;
      }
    }
    .cinema-detail-item-container:nth-last-child(1) {
      .nut-cell {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
